<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-bar-nav {
				background-color: #498af7 !important;
			}
			
			.mui-title,
			.mui-action-back {
				color: #FFFFFF;
			}
			
			.head {
				height: 40px;
			}
			
			#head {
				line-height: 40px;
			}
			
			#headImg {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
			
			.mui-table-view {
				margin-top: 15px;
			}
			
			.mui-pull-right {
				color: #999999;
			}
			
			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			/*使tap时不变色*/
			/*.no-active .mui-table-view-cell.mui-active {
				background-color: #FFFFFF !important;
			}*/
			
			.no-active .mui-table-view-cell .mui-active {
				background-color: #FFFFFF !important;
			}
		</style>
	</head>

	<body>
		<div id="account" class="mui-page">
			<header class="mui-navbar-inner mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">个人信息</h1>
			</header>
			<div class="mui-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a id="head" class="mui-navigate-right">头像
							<span class="mui-pull-right head">
								<img class="head-img mui-action-preview" id="headImg" src=""/>
							</span>
						</a>
					</li>
					<li id="resetAccount" class="mui-table-view-cell">
						<a>昵称<span class="account mui-pull-right"></span></a>
					</li>
					<li id="resetPhone" class="mui-table-view-cell">
						<a>手机号<span class="phone mui-pull-right"></span></a>
					</li>
					<li id="resetEmail" class="mui-table-view-cell">
						<a>邮箱地址<span class="email mui-pull-right"></span></a>
					</li>
				</ul>
				<ul class="mui-table-view no-active">
					<li class="mui-table-view-cell">
						<a>医院<span class="hospital mui-pull-right"></span></a>
					</li>
					<li class="mui-table-view-cell">
						<a>科室<span class="department mui-pull-right"></span></a>
					</li>
					<li class="mui-table-view-cell">
						<a>职位<span class="role mui-pull-right"></span></a>
					</li>
					<li class="mui-table-view-cell">
						<a>姓名<span class="user mui-pull-right"></span></a>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script type="text/javascript">
		mui.init()
		var account = document.getElementsByClassName("account")[0];
		phone = document.getElementsByClassName("phone")[0];
		email = document.getElementsByClassName("email")[0];

		mui.plusReady(function() {
			//从storage中取出字符串并将字符串转化为对象
			var userData = JSON.parse(plus.storage.getItem("userinfo"));
			//填充数据
			account.innerHTML = userData['account'];
			phone.innerHTML = userData['phone'];
			email.innerHTML = userData['email'];
			document.getElementsByClassName("hospital")[0].innerHTML = userData.hospitalname;
			document.getElementsByClassName("department")[0].innerHTML = userData.departmentname;
			document.getElementsByClassName("role")[0].innerHTML = userData.roleName;
			document.getElementsByClassName("user")[0].innerHTML = userData.username;
		})

		//添加页面跳转事件
		document.getElementById("resetAccount").addEventListener('tap', function() {
			mui.openWindow('reset_account.html', 'reset_account.html', {})
		})
		document.getElementById('resetPhone').addEventListener('tap', function() {
			mui.openWindow('reset_phone.html', 'reset_phone.html', {})
		})
		document.getElementById('resetEmail').addEventListener('tap', function() {
			mui.openWindow('reset_email.html', 'reset_email.html', {})
		})

		//添加自定义事件，用户修改信息后，更新信息
		window.addEventListener('updateData', function(e) {
			//从storage中取出字符串并将字符串转化为对象
			var userData = JSON.parse(plus.storage.getItem("userinfo"));

			var targetDom,
				targetStr = e.detail.target;
			switch(targetStr) {
				case "account":
					targetDom = account;
					break;
				case "phone":
					targetDom = phone;
					break;
				case "email":
					targetDom = email;
					break;
				default:
					console.log("updateData溢出");
					break;
			}
			targetDom.innerHTML = userData[targetStr];
		})

		//更换头像
		setTimeout(function() {
			defaultImg();
			setTimeout(function() {
				initImgPreview();
			}, 300);
		}, 500);

		mui(".mui-table-view-cell").on("tap", "#head", function(e) {
			//未连接网络，则提示并return
			if(plus.networkinfo.getCurrentType() === 1) {
				mui.toast("网络异常");
				return;
			}
			
			if(mui.os.plus) {
				var a = [{
					title: "拍照"
				}, {
					title: "从手机相册选择"
				}];
				plus.nativeUI.actionSheet({
					title: "修改头像",
					cancel: "取消",
					buttons: a
				}, function(b) {
					switch(b.index) {
						case 0:
							break;
						case 1:
							getImage();
							break;
						case 2:
							galleryImg();
							break;
						default:
							break
					}
				})
				//触发自定义事件修改我的页面头像
			}

		});

		function getImage() {
			var c = plus.camera.getCamera();
			c.captureImage(function(e) {
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					var s = entry.toLocalURL() + "?version=" + new Date().getTime();
					document.getElementById("headImg").src = s;
					//变更大图预览的src
					//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
					document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();
					resizeImage(e); // 压缩图片并上传服务器,更新头像
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(s) {
				console.log("error" + s);
			}, {
				filename: "_doc/head.jpg"
			})
		}

		//再对图片进行压缩为270*270，再上传到服务器
		function resizeImage(src) {
			plus.zip.compressImage({
					src: src,
					dst: '_doc/head.jpg',
					overwrite: true,
					width: '270px', //这里指定了宽度，同样可以修改
					format: 'jpg',
					quality: 100 //图片质量不再修改，以免失真
				},
				function(e) {
					plus.nativeUI.closeWaiting();
					uploadImg(e.target); //上传图片, e.target存的是本地路径！
				},
				function(err) {
					plus.nativeUI.alert('未知错误！', function() {
						mui.back();
					});
				}
			);
		}

		function uploadImg(src) {
			var task = plus.uploader.createUpload('http://app.xiaoweicanting.com/hospital.php?m=App&c=login&a=updateheadimg', {
				method: 'post',
				blocksize: 204800,
				timeout: 10
			}, function(upload, status) {
				plus.nativeUI.closeWaiting();
				console.log("upload cb:" + upload.responseText);
				if(status == 200) {
					var data = JSON.parse(upload.responseText);
					mui.toast(data.msg);
					//触发自定义事件修改我的页面头像
					var ms = plus.webview.getWebviewById("my.html");
					mui.fire(ms, 'updateData', {
						target: 'headImg'
					});
				} else {
					console.log("upload fail");
				}

			});
			task.addFile(src, {
				key: 'headimg'
			});
			task.addData('userid', '4');
			task.start();
		}

		function galleryImg() {
			plus.gallery.pick(function(a) {
				plus.io.resolveLocalFileSystemURL(a, function(entry) {
					plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
						root.getFile("head.jpg", {}, function(file) {
							//文件已存在
							file.remove(function() {
								console.log("file remove success");
								entry.copyTo(root, 'head.jpg', function(e) {
										var e = e.fullPath + "?version=" + new Date().getTime();
										document.getElementById("headImg").src = e;
										//变更大图预览的src
										//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
										document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
										resizeImage(a); // 压缩图片并上传服务器,更新头像
									},
									function(e) {
										console.log('copy image fail:' + e.message);
									});
							}, function() {
								console.log("delete image fail:" + e.message);
							});
						}, function() {
							//文件不存在
							entry.copyTo(root, 'head.jpg', function(e) {
									var path = e.fullPath + "?version=" + new Date().getTime();
									document.getElementById("headImg").src = path;
									//变更大图预览的src
									//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
									document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
								},
								function(e) {
									console.log('copy image fail:' + e.message);
								});
						});
					}, function(e) {
						console.log("get _www folder fail");
					})
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(a) {}, {
				filter: "image"
			})
		};

		function defaultImg() {
			if(mui.os.plus) {
				plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
					var s = entry.fullPath + "?version=" + new Date().getTime();
					document.getElementById("headImg").src = s;
				}, function(e) {
					document.getElementById("headImg").src = '../../images/logo.png';
				})
			} else {
				document.getElementById("headImg").src = '../../images/logo.png';
			}
		}
		document.getElementById("headImg").addEventListener('tap', function(e) {
			e.stopPropagation();
		});

		function initImgPreview() {
			var imgs = document.querySelectorAll("img.mui-action-preview");
			imgs = mui.slice.call(imgs);
			if(imgs && imgs.length > 0) {
				var slider = document.createElement("div");
				slider.setAttribute("id", "__mui-imageview__");
				slider.classList.add("mui-slider");
				slider.classList.add("mui-fullscreen");
				slider.style.display = "none";
				slider.addEventListener("tap", function() {
					slider.style.display = "none";
				});
				slider.addEventListener("touchmove", function(event) {
					event.preventDefault();
				})
				var slider_group = document.createElement("div");
				slider_group.setAttribute("id", "__mui-imageview__group");
				slider_group.classList.add("mui-slider-group");
				imgs.forEach(function(value, index, array) {
					//给图片添加点击事件，触发预览显示；
					value.addEventListener('tap', function() {
						slider.style.display = "block";
						_slider.refresh();
						_slider.gotoItem(index, 0);
					})
					var item = document.createElement("div");
					item.classList.add("mui-slider-item");
					var a = document.createElement("a");
					var img = document.createElement("img");
					img.setAttribute("src", value.src);
					a.appendChild(img)
					item.appendChild(a);
					slider_group.appendChild(item);
				});
				slider.appendChild(slider_group);
				document.body.appendChild(slider);
				var _slider = mui(slider).slider();
			}
		}
	</script>

</html>